function init_thumbnail() {
    $('.thumbnail').hover(
        function() {
            $(this).find('.caption').show('fast')
        }, function() {
            $(this).find('.caption').hide('fast')
        }
    )

    $('.thumbnail .item-info').popover()

    $.get('/static/confirm-modal.html',function(data){
        $(data).appendTo('body')

        $('#modal-cancel').click(function(e) {
            e.preventDefault()
            $('#confirm-modal').modal('hide')
        })

        $('#modal-confirm').click(function(e) {
            e.preventDefault()
            var qty = $('#confirm-modal').find('.quantity').val()
            var stk = $('#confirm-modal').find('.stock').html()
            qty = parseInt(qty)
            stk = parseInt(stk)
            if(!qty || (qty < 1)) {
                modal_error('Invalid quantity!')
                return false
            } else if(0 === stk) {
                modal_error('No more available!')
                return false
            } else if(!stk) {
                modal_error('Invalid stock!')
                return false
            }
            if(qty > stk) {
                modal_error('Quantity exceeds stock!')
                return false
            }
            var data = {
                pk: $(this).data('pk'),
                quantity: qty,
            }
            console.info('data to post:')
            console.info(data)
            // Assume browser support JSON natively!
            $.post('/shop/cart/add', JSON.stringify(data), function(data) {
                console.info(data)
                modal_success("You've added " + qty + " items to cart!")
            })
        })
    })

    function prepare_modal(selector, data) {
        var modal = $(selector)
        modal.find('.figure').attr('src', data.pic_url)
        modal.find('.name').html(data.name)
        modal.find('.description').html(data.detail)
        modal.find('.stock').html(data.stock)
        modal.find('.price').html(data.price)
        modal.find('.quantity').val(1)
        modal.find('#modal-confirm').data('pk', data.pk).show()
        modal.find('#modal-cancel').html('Cancel')
        modal.find('.alert').hide()
        modal.find('#modal-info').hide()
    }

    function modal_error(msg) {
        var modal = $('#confirm-modal')
        var alert_area = modal.find('.alert')
        alert_area.hide()
        alert_area.removeClass('alert-success').addClass('alert-error')
        alert_area.find('strong').html('Oops!')
        alert_area.find('span').html(msg)
        alert_area.fadeIn()
    }

    function modal_success(msg) {
        var modal = $('#confirm-modal')
        var alert_area = modal.find('.alert')
        alert_area.hide()
        alert_area.removeClass('alert-error').addClass('alert-success')
        alert_area.find('strong').html('Congratulations!')
        alert_area.find('span').html(msg)
        alert_area.fadeIn()
        $('#modal-confirm').hide()
        $('#modal-info').show()
        $('#modal-cancel').html('Close')
    }

    $('.cart-button').bind('click', function(e) {
        e.preventDefault()
        var pk = $(this).data('pk')
        var url = '/shop/item/' + pk
        $.get(url, function(data) {
            prepare_modal('#confirm-modal', data)
            $('#confirm-modal').modal('show')
        })
    })
}
